<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器的基本使用</title>
    <script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">

    <p><a href="https://cn.vuejs.org/v2/guide/filters.html">过滤器可以用在两个地方：双花括号插值 和 v-bind 表达式 </a></p>

    <p>1.过滤器：无参数过滤器</p>
    <label>{{ msg | msgFormat }}</label>

    <p>2.过滤器：接受两个参数的过滤器</p>
    <label>{{ msg | msgFormat2('疯狂','2B') }}</label>

    <p>3.多个过滤器</p>
    <label>{{ msg | msgFormat | test }}</label>

    <p>4.1 过滤器 -- 过滤时间</p>
    <label>{{ new Date().toString() | dateFormat }}</label>

    <p>4.2 过滤器 -- 过滤时间 -- 传参</p>
    <label>{{ new Date().toString() | dateFormat('yyyy-mm-dd') }}</label>

    <p>5.1 私有过滤器 </p>
    <label>利用的是全局过滤器 ： {{ new Date().toString() | dateFormat}}</label>

</div>

<!--  5.私有过滤器  -->
<div id="app2">

    <p>5.2 私有过滤器 </p>
    <label>利用的是私有过滤器 ：不带参数 {{ dt | dateFormat}}</label>
    <br>
    <label>利用的是私有过滤器 ：带参数 {{ dt | dateFormat("yyyy-mm-dd")}}</label>

</div>
<script>

    // 过滤器调用时候的格式：  {{ message | 过滤器的名称 }}

    // ========================= 1.过滤器：无参数过滤器 ========================

    //定义一个 Vue的全局的过滤器，过滤器的名字是：msgFormat
    //function第一个参数是从 msg 传递过来的（默认第一个参数都是这个值）

    Vue.filter('msgFormat', function (data) {

        // return data.replace("单纯", '邪恶')

        // String.replace()方法的第一个参数可以是 一个字符串，也可以是 正则表达式
        return data.replace(/单纯/g, '邪恶') // g： 表示 全局 正则表达式
    })

    // ========================= 2.过滤器：接受两个参数的过滤器 ========================
    Vue.filter('msgFormat2', function (data, arg1, arg2) {
        return data.replace(/单纯/g, arg1 + arg2)
    })

    // ========================= 3.多个过滤器 ========================
    Vue.filter('test', function (data) {
        return data + "----"
    })

    // ========================= 4.过滤器 -- 过滤时间 ========================
    Vue.filter('dateFormat', function (dataStr, pattern = "") {
        var dt = new Date(dataStr)

        var year = dt.getFullYear()

        var month = (dt.getMonth() + 1)//.toString().padStart(2, "0")

        var day = dt.getDate()//.toString().padStart(2, "0")


        if (pattern.toLowerCase() == "yyyy-mm-dd") {
            return `${year}-${month}-${day}`
        } else {
            var hh = dt.getHours()//.toString().padStart(2, "0")

            var mm = dt.getMinutes()//.toString().padStart(2, "0")

            var ss = dt.getSeconds()//.toString().padStart(2, "0")

            return `${year}-${month}-${day} ${hh}:${mm}:${ss}`
        }
    })

    // ========================= 5. 私有过滤器 ========================


    var vm = new Vue({
        el: '#app',
        data: {
            msg: "曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人",
        },
        methods: {}
    })

    //  <!--  5.私有过滤器  -->
    var vm2 = new Vue({
        el: '#app2',
        data: {
            dt: new Date()
        },
        methods: {},
        filters: {//这里定义的是 私有过滤器（包括 过滤器的名字 和 处理函数 ）

            // 过滤器在调用的时候，采用的是就近原则：如果私有过滤器的名字和全局过滤器的名字一致，辣么，优先调用私有过滤器
            dateFormat: function (data, pattern = "") {
                var dt = new Date(data)

                var year = dt.getFullYear()
                var month = (dt.getMonth() + 1).toString().padStart(2, "0")
                var day = dt.getDate().toString().padStart(2, "0")

                //String.padStart(targetLength, padString)
                //String.padEnd(targetLength, padString)


                if (pattern.toLowerCase() == "yyyy-mm-dd") {
                    return `${year}-${month}-${day} ~~~私有过滤器~~~`
                } else {
                    var hh = dt.getHours().toString().padStart(2, "0")
                    var mm = dt.getMinutes().toString().padStart(2, "0")
                    var ss = dt.getSeconds().toString().padStart(2, "0")

                    return `${year}-${month}-${day} ${hh}:${mm}:${ss} ~~~私有过滤器~~~`
                }
            }
        }
    })
</script>
</body>
</html>
